<template>
	<view class="page">
		<view class="page-head-bg-box">
			<image :src="getAssets('@/static/static-online/my/my-bg.png')" mode=""></image>
		</view>


		<!-- <u-sticky> -->
		<!-- :class="{show_background_color: show_background_color}"  -->
		<view class="page-navbar" :style="{background: headBackground}">
			<view class="head-nav">
				<u-navbar :fixed="false" :placeholder="false" bgColor="transparent" title="仁皿医疗器械" :safeAreaInsetTop="true"
					:titleStyle="{color: '#000000', fontWeight: 500}">
					<view slot="left" class="u-nav-slot navbar-left">
						<view class="head-nav-left-box flex">
							<image src="@/static/index/head-title.png" mode="" style="width: 130rpx;height: 64rpx;"></image>
							<!-- 	<view class="nav-left-text ellipsis-1" style="color:#CB0011;font-weight: bold;font-size: 32rpx;">
								仁皿医疗器械
							</view> -->
						</view>
					</view>
					<view slot="center" class="u-nav-slot navbar-center" style="display: none;">

					</view>
				</u-navbar>
			</view>

			<view class="head-search">
				<view class="search-box" @click="toRoute('/product-search')">
					<image src="@/static/common/search.png"></image>
					<view class="text">搜索您想要的商品</view>
				</view>
			</view>
		</view>
		<!-- </u-sticky> -->


		<view class="page-ctx">
			<w_fill_block height="192" hasStatusBar></w_fill_block>

			<view class="ctx-top">
				<view class="banner-wrap">
					<view class="banner-box">
						<view class="banner">
							<u-swiper radius="8" circular indicator indicatorMode="dot" height="140" @click="banner_swiperClick"
								:list="banners" keyName="image"></u-swiper>
						</view>
					</view>
				</view>

			</view>

			<!-- <view class="brand-box">
				<view class="brand-top" @click="toRoute({path: '/product-brand-list'})">
					<view class="brand-top-left">
						<text>品牌推荐</text>
						<text>精选大牌 品类齐全</text>
					</view>
					<image src="@/static/common/arrow.png"></image>
				</view>
				<view class="brand-list">
					<view class="brand-item" @click="toRoute({path: '/product-list', query: {brand_id: item.id}})"
						v-for="(item,index) in brandList" :key="index">
						<image :src="item.originalPic"></image>
					</view>
				</view>
			</view> -->


			<view class="ctx-bottom">
				<!-- 顶部导航 -->
				<view class="mod-box">
					<view class="grid-list flex">
						<view class="grid-item" v-for="(item,index) in modList" :key="index" @click="customNavClick(item,index)">
							<view class="img-box">
								<image class="img" :src="item.thumb" mode=""></image>
							</view>
							<view class="grid-title">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>


				<view class="activity-box flex-between" v-if="products_flashsale_group.length">
					<view class="activity-item">
						<view class="act-title flex-between" @click="toRoute('/product-flash-sale')">
							<view class="title">
								<image src="@/static/index/index-flashsale.png" mode=""></image>
							</view>
							<!-- <view class="tag">
								优选好物
							</view> -->

							<view class="countdown-wrap flex">
								<text class="countdown-text">
									距离本场结束
								</text>
								<view class="countdown-box">
									<!-- <u-count-down :time="daojishi_time_ms" format="HH:mm:ss"></u-count-down> -->
									<count_down_in_index :time="daojishi_time_ms" />
								</view>
							</view>
						</view>

						<!-- 	<scroll-view scroll-x="true" class="scroll-container">
							<view class="products-scroll-box">
							</view>
						</scroll-view> -->

						<view class="product-wrap">
							<view class="swiper-box">
								<swiper class="swiper" :current="current_swiper_index_flashsale" :indicator-dots="false"
									indicator-color="#51B2C7" :circular="true" :vertical="false" indicator-active-color="#25832A"
									:autoplay="true" :interval="4000" :duration="500" previous-margin="0" next-margin="0"
									:display-multiple-items="1" @change="changeSwiperFlash">

									<swiper-item v-for="(items,index) in products_flashsale_group" :key="index">
										<view class="swiper-item">
											<view class="swiper-products">
												<view class="product-item" v-for="(item,gindex) in items" :key="gindex"
													@click="to_flash_detail(item)">
													<view class="poster-box">
														<image :src="item.thumb" mode="aspectFill"></image>
													</view>
													<view class="info-box">
														<view class="ms-price-info flex-center">
															<text class="huobi">
																秒杀价￥
															</text>
															<text class="value">
																{{item.priceSale || 0}}
															</text>
														</view>
														<view class="price-info">
															<text class="huobi">
																￥
															</text>
															<text class="value">
																{{item.priceMarket || 0}}
															</text>
														</view>
													</view>

												</view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view>

					<!-- <view class="activity-item">
						<view class="act-title flex" @click="toRoute({path: '/product-list', query: {tags: '热销'}})">
							<view class="title">
								热销商品
							</view>
							<view class="tag suggest">
								推荐好物
							</view>
						</view>
						
						<view class="product-wrap">
							<view class="swiper-box">
								<swiper class="swiper" :current="current_swiper_index_suggest" :indicator-dots="false"
									indicator-color="#51B2C7" :circular="true" :vertical="false" indicator-active-color="#25832A"
									:autoplay="true" :interval="4000" :duration="500" previous-margin="0" next-margin="0"
									:display-multiple-items="1" @change="changeSwiperSuggest">

									<swiper-item v-for="(items,index) in products_suggest_group" :key="index">
										<view class="swiper-ite
m">
											<view class="swiper-products">
												<view class="product-item" v-for="(item,iindex) in items" :key="iindex"
													@click="to_suggest_detail(item)">
													<view class="poster-box">
														<image :src="item.img" mode="aspectFill"></image>
													</view>
													<view class="price-info">
														<text class="huobi">
															￥
														</text>
														<text class="value">
															{{item.priceSale || 0}}
														</text>
													</view>
												</view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>


					</view> -->

				</view>


				<!-- 首页导航图标 -->


				<view class="product-wrap">
					<!-- <view class="goods-list flex-between">
						<view class="goods-item" v-if="advList.length">
							<view class="goods-adv">
								<view class="adv-banner-box">
									<view class="banner">
										<u-swiper radius="8" circular indicator indicatorMode="dot" height="255" @click="adv_swiperClick"
											:list="advList" keyName="image"></u-swiper>
									</view>
								</view>
							</view>
						</view>
						<view class="goods-item" v-for="(item,index) in products_default" :key="index" @click="to_detail(item)">
							<view class="poster-box">
								<image class="poster" :src="item.thumb" mode="aspectFill"></image>
							</view>
							<view class="info-box">
								<view class="title-box ">
									<view class="title ellipsis-1">
										{{item.title}}
									</view>
								</view>
								<view class="price-box flex-between">
									<view class="price">
										<text class="huobi">￥</text>
										<text class="price-val">{{item.priceSale || 0}}</text>
									</view>
									<view class="car-ico">
										<image src="@/static/common/add.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view> -->

					<productList :list="products_default"></productList>
					<u-loadmore :status="product_loadmore_status" />
				</view>

			</view>
		</view>

		<!-- <cartBottom ref="CartBottom" @delAll="delcarAll"></cartBottom> -->
	</view>
</template>

<script>
	import productList from '@/components/product/productList.vue'
	import count_down_in_index from '@/components/count-down/count-down-in-index.vue'
	export default {
		components: {
			productList,
			count_down_in_index
		},
		data() {
			return {
				defaultHeadBackground: 'transparent',
				headBackground: 'rgba(255,255,255,0)', //控制顶部标题栏颜色 默认透明颜色 transparent
				show_background_color: false,
				//
				banners: [],
				modList: [],
				advList: [],
				//
				products_default: [],
				//
				daojishi_time_ms: 0,
				products_flashsale: [],
				current_swiper_index_flashsale: 0,
				products_flashsale_group: [],
				//
				products_suggest: [],
				current_swiper_index_suggest: 0,
				products_suggest_group: [],

				//
				pagination: {
					page: 1,
					pageNum: 6
				},
				product_loadmore_status: 'loadmore', //loadmore  / loading / nomore
				brandList: [], //品牌列表

				cart_is_selected_all: false,
				cart_products: [], //产品列表
				cart_total_num: 0, //购物车总数量
				cart_total_price: 0, //购物车总金额
				showCarPoup: false,
				SelectCarList: [], //点击加入购物车的数据
			};
		},

		onLoad() {
			this.setView();
		},
		onShow() {
			this.query_cart()
		},
		// onPageScroll(e) {
		// 	// console.log(e)
		// 	if (e.scrollTop != 0) {
		// 		this.show_background_color = true;
		// 	} else {
		// 		this.show_background_color = false;
		// 	}
		// },

		onPageScroll(e) {
			// console.log(e)
			let percent = e.scrollTop / 50;
			percent = percent < 1 ? percent : 1

			this.headBackground = `rgba(255,255,255,${percent})`

			if (e.scrollTop != 0) {
				// this.headBackground = this.statusBackgroundMap[this.userRole]
			} else {
				// this.headBackground = ''
			}


			if (percent > 0.5) {

				// this.headBackground = this.statusBackgroundMap[this.userRole]
			} else {
				// this.headBackground = ''
			}
		},

		onReachBottom() {
			this.loadMore()
		},

		methods: {
			loadMore() {
				if (this.product_loadmore_status == 'loadmore') {
					this.product_loadmore_status = 'loading'
					this.pagination.page++;
					this.query_product_default();
				}
			},

			setView() {
				this.query_banner();
				this.query_index_cate();
				this.query_product_flashsale();
				this.query_product_default();
			},

			query_banner() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'banner_index',
						position: 4,
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data
						this.banners = data[0].images
					}
				})
			},
			query_index_cate() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_channel',
					},
				}).then(res => {
					if (res.code == 200) {
						this.modList = res.data.filter(v => v.isHot == 1);
						// let data = res.data
						// this.banners = data[0].images
					}
				})
			},

			query_product_flashsale() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_plist',
						ifSeckill: 1,
						page: 1,
						pageNum: 100
					},
				}).then(res => {
					if (res.code == 200) {
						let list = res.data.list;
						this.daojishi_time_ms = res.data.second * 1000;
						this.products_flashsale = list;
						this.products_flashsale_group = this.get_product_swiper_group(list)
					}
				})
			},

			get_product_swiper_group(list) {
				let group_length = 3;
				let group_list = []
				list.forEach((v, index) => {
					let gindex = Math.floor(index / group_length)
					if (!group_list[gindex]) {
						group_list[gindex] = []
					}
					group_list[gindex].push(v)
				})

				return group_list
			},

			query_product_default() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_plist',
						...this.pagination,
					},
				}).then(res => {
					if (res.code == 200) {
						this.products_default = this.products_default.concat(res.data.list);
						this.product_loadmore_status = res.data.count > this.products_default.length ? 'loadmore' : 'nomore';
					}
				})
			},

			to_flash_detail(item) {
				console.log('点击了')
				this.toRoute({
					path: '/product-detail',
					query: {
						id: item.inventoryId,
						time: item.cuxiao_time
					}
				})
			},
			to_suggest_detail(item) {
				this.toRoute({
					path: '/product-detail',
					query: {
						id: item.inventoryId
					}
				})
			},
			to_detail(item) {
				this.toRoute({
					path: '/product-detail',
					query: {
						id: item.inventoryId
					}
				})
			},


			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeSwiperFlash() {},
			changeSwiperSuggest() {},

			banner_swiperClick(index) {
				this.$log('swiper index', index)
				this.$log('swiper item', this.banners[index])
				this.$log('swiper list', this.banners)

				let item = this.banners[index]
				this.doSwiperClick(item)
			},
			adv_swiperClick(index) {
				this.$log('swiper index', index)
				this.$log('swiper item', this.advList[index])
				this.$log('swiper list', this.advList)

				let item = this.banners[index]
				this.doSwiperClick(item)
			},

			doSwiperClick(item) {
				let {
					channelId,
					inventoryId,
					url
				} = item;
				if (!!channelId) {
					this.toRoute({
						path: '/category',
						query: {
							id: channelId
						}
					})
				} else if (!!inventoryId) {
					this.toRoute({
						path: '/product-detail',
						query: {
							id: inventoryId
						}
					})
				} else if (url) {
					this.handleUrlJump(url)
				}
			},
			customNavClick(item) {
				this.$log('customNavClick 参数', item)
				if (item.url) {
					this.handleUrlJump(item.url)
				} else if (item.id) {
					this.toRoute({
						path: '/category',
						query: {
							id: item.id
						}
					})
				}
			},
			doAddCartFn(item) {
				let gid = item.inventoryId
				if (item.kucun == '0.00') {
					this.$alert('库存不足！')
					return false;
				}
				if (this.guige_type == '多规格') {
					gid = item.inventoryId
				}
				let SelectIndex = this.SelectCarList.findIndex(v => v.inventoryId == item.inventoryId)
				if (SelectIndex >= 0) {
					this.SelectCarList.splice(SelectIndex, 1)
				} else {
					this.SelectCarList.push(item.inventoryId)
				}

				this.$api({
					url: '/service.php',
					method: 'post',
					data: {
						action: 'gouwuche_add',
						inventoryId: gid,
						num: 1,
					},
				}).then(res => {
					this.$alert(res)
					if (res.code == 200) {
						this.query_cart()
						//this.$store.commit('set_vuex_cart_number', res.data.count)
					}
				})
			},

			query_cart() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'gouwuche_lists',
					},
				}).then(res => {
					if (res.code == 200) {
						let cart_total_num = 0;
						let cart_total_price = 0;
						this.cart_is_selected_all = false
						res.data.forEach(v => {
							v.num = parseInt(v.num);
							v.is_selected = false;
							v.keyVals = v.keyVals == '无' ? '默认' : v.keyVals
							cart_total_num += parseInt(v.num)
							cart_total_price += parseInt(v.num) * parseFloat(v.priceSale)
						})
						this.cart_total_num = cart_total_num;
						this.cart_total_price = (parseFloat(cart_total_price)).toFixed(2);
						this.cart_products = res.data;

						if (cart_total_num == 0) {
							this.SelectCarList = []
						}
						this.$store.commit('set_vuex_cart_number', cart_total_num)
					}
				})
			},

			GoodsupdateCarNum(e, item, index) {
				this.$log('item', item)

				let num = e.value;
				let selectGoods = this.cart_products.filter((v => v.inventoryId == item.inventoryId))
				let findIndex = this.cart_products.findIndex((v => v.inventoryId == item.inventoryId))
				console.log(selectGoods, '参数111', num)
				if (selectGoods && num > selectGoods[0].num) { //增加
					num = selectGoods[0].num + 1
				} else if (selectGoods && num < selectGoods[0].num) { //减少
					num = selectGoods[0].num - 1
				}
				console.log(selectGoods, '参数111', num, findIndex)
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'gouwuche_updateNum',
						inventoryId: item.inventoryId, //产品规格id(多个用,分开)
						num: num,
					},
				}).then(res => {
					if (res.code == 200) {
						this.$set(this.cart_products[findIndex], 'num', num)
						this.cart_total_num = res.data.count

						// this.cart_products = this.cart_products.filter(v => !v.is_selected);
						this.$store.commit('set_vuex_cart_number', res.data.count)

						this.$refs.CartBottom.init(this.cart_products, this.cart_total_num);
					}
				})
			},

			SanClick() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码结果', res);
					}
				});
			},

			delcarAll() {
				this.cart_products = [] //产品列表
				this.cart_total_num = 0 //购物车总数量
				this.cart_total_price = 0 //购物车总金额
				this.SelectCarList = []
				this.$store.commit('set_vuex_cart_number', 0)
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	// 设置标题左对齐
	.page-navbar ::v-deep .u-navbar__content__left {
		// display: none;
	}

	.page-navbar ::v-deep .u-navbar__content__title {
		flex: 1;
		padding-left: 32rpx;
		text-align: left;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
	}

	// 设置标题左对齐
	//  倒计时
	::v-deep // 



	.page-head-bg-box {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 562rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}


	/deep/.u-sticky {
		top: 0 !important;
	}

	.page-navbar {
		background: #fff;
		background: linear-gradient(179deg, #4EC2FF 0%, #7BE1DC 100%);
		background: transparent;
		// height: 176rpx;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;

		&.show_background_color {
			background: #ffffff !important;

			.head-nav {
				background: #ffffff !important;
			}

			.head-search {
				background: #ffffff !important;
			}
		}


		.head-nav {
			background: linear-gradient(179deg, #4EC2FF 0%, #7BE1DC 100%);
			background: transparent;

			.head-nav-left-box {
				width: 270rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				.nav-left-text {
					margin-left: 6rpx;
					flex: 1;

					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
				}
			}
		}


		.head-search {
			height: 104rpx;
			padding: 20rpx 30rpx;
			background: linear-gradient(180deg, #7BE1DC 0%, rgba(123, 225, 220, 0) 96%, rgba(123, 225, 220, 0) 100%);
			background: linear-gradient(180deg, #7BE1DC 0%, #fff 96%, #fff 100%);
			background: transparent;


			.search-box {
				width: 100%;
				height: 72rpx;
				background: linear-gradient(180deg, #ECFAF9 0%, #FFFFFF 100%);
				background: #fff;
				// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				// box-shadow: none;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: 1rpx solid #f5f5f5;


				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 22rpx;
				}

				.text {
					flex: 1;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #838B9E;
				}



			}
		}
	}

	// 顶部搜索样式

	.page {
		padding-bottom: 120rpx;
		min-height: calc(100vh - 120rpx);



		/deep/.u-sticky {
			top: 0 !important;
		}

		.page-ctx {
			padding: 0 0rpx;
			position: relative;
			z-index: 1;

			.ctx-top {
				.banner-wrap {
					padding: 0 32rpx;
				}
			}

			.ctx-bottom {
				padding: 0 32rpx;
			}
		}
	}


	.banner-box {
		margin: 24rpx 0;
		margin-top: 10rpx;
		margin-bottom: 0;
		padding: 0 0;

		.banner {}
	}



	.nav-box {
		margin-bottom: 24rpx;
		padding: 40rpx 0 30rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		// border-radius: 32rpx 32rpx 32rpx 32rpx;

		.grid-list {
			flex-wrap: wrap;

			.grid-item {
				width: 25%;
				// flex: 1;
				text-align: center;
				margin-top: 40rpx;

				&:nth-child(-n + 5) {
					margin-top: 0;
				}

				.img-box {
					width: 80rpx;
					height: 80rpx;
					margin: 0 auto;

					.img {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.grid-title {
					margin-top: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}
	}




	.mod-box {
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		padding: 40rpx 0 30rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 32rpx 32rpx 32rpx 32rpx;

		.grid-list {
			flex-wrap: wrap;

			.grid-item {
				width: 20%;
				// flex: 1;
				text-align: center;
				margin-top: 40rpx;

				&:nth-child(-n + 5) {
					margin-top: 0;
				}

				.img-box {
					width: 80rpx;
					height: 80rpx;
					margin: 0 auto;

					.img {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.grid-title {
					margin-top: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					font-size: 22rpx;
					color: #000000;
				}
			}
		}
	}



	.activity-box {
		.activity-item {
			width: 50%;
			width: 100%;
			min-height: 292rpx;
			background: #fff;


			&+.activity-item {
				margin-left: 24rpx;
			}

			.act-title {
				width: 100%;
				min-height: 68rpx;
				// background: linear-gradient(180deg, rgba(81, 178, 199, 0.4) 0%, rgba(81, 178, 199, 0) 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 24rpx 24rpx 0;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;

					image {
						width: 137rpx;
						height: 32rpx;
					}
				}

				.tag {
					margin-left: 16rpx;
					padding: 0 16rpx;
					min-width: 112rpx;
					height: 32rpx;
					background: #51B2C7;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;

					&.suggest {
						background: #CB0011;
					}
				}


				.countdown-wrap {
					.countdown-text {
						margin-right: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
					}
				}

			}


			.product-wrap {
				margin-top: 24rpx;
			}

			.swiper-box {
				.swiper {
					height: 340rpx;

					.swiper-item {
						position: relative;
						height: 340rpx;
						overflow: hidden;
						padding: 0 24rpx;
					}
				}
			}


			.swiper-products {
				padding: 0;
				display: flex;
				// justify-content: space-between;

				.products-scroll-box {
					white-space: nowrap;
				}

				.product-item {
					display: inline-block;
					width: 202rpx;
					margin-right: 16rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}

					.poster-box {
						width: 202rpx;
						height: 202rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 202rpx;
							height: 202rpx;
						}
					}


					.info-box {
						padding-top: 24rpx;
					}

					.ms-price-info {
						text-align: center;

						text {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 26rpx;
							color: #CB0011;
						}
					}

					.price-info {
						text-align: center;
						margin-top: 4rpx;


						text {
							text-decoration: line-through;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}


	.product-wrap {
		margin-top: 24rpx;
	}





	.adv-banner-box {
		.banner {
			height: 510rpx;
		}
	}

	.goods-list {
		flex-wrap: wrap;

		.goods-item {
			margin-bottom: 24rpx;
			width: 334rpx;
			height: 486rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);


			.poster-box {
				position: relative;
				width: 334rpx;
				height: 332rpx;

				image {
					width: 334rpx;
					height: 332rpx;
				}
			}

			.info-box {
				padding: 24rpx;

				.title-box {
					// height: 70rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;


					image {
						margin-right: 4rpx;
						width: 56rpx;
						height: 28rpx;
					}
				}

				.desc {
					margin-top: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 16rpx;
					color: #838B9E;
				}

				.price-box {
					margin-top: 16rpx;

					.price {
						.huobi {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #CB0011;
						}

						.price-val {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #CB0011;
						}
					}

					.car-ico {
						width: 32rpx;
						height: 32rpx;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.price-line {
						margin-left: 10rpx;
						flex: 1;
						overflow: hidden;
						text-decoration: line-through;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #7D7D7D;
					}

					.sale {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #9695A3;
					}
				}
			}
		}
	}

	.brand-box {
		padding: 26rpx 24rpx 40rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 24rpx 36rpx 16rpx;

		.brand-top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.brand-top-left {
				text {
					&:nth-child(1) {
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
						position: relative;

						&::after {
							content: '';
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							right: -16rpx;
							width: 2rpx;
							height: 16rpx;
							background: #DDE2EC;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}
					}

					&:nth-child(2) {
						font-size: 24rpx;
						color: #C7CEDB;
						margin-left: 34rpx;
					}
				}
			}

			image {
				width: 12rpx;
				height: 20rpx;
			}
		}

		.brand-list {
			margin-top: 18rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.brand-item {
				width: 202rpx;
				height: 144rpx;
				background: #E6E9F2;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-bottom: 16rpx;
				margin-right: 13rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				image {
					width: 202rpx;
					height: 144rpx;
				}
			}
		}
	}
</style>